<template>
  <div class="center-container">
    <img class="bg-img lbx-img" src="../../assets/images/lbx.png" alt="lbx" />
    <img class="bg-img jt-img" src="../../assets/images/jt.png" alt="jt" />
    <img class="bg-img map-img" src="../../assets/images/map.png" alt="map" />

    <Chart :option="option" />
  </div>
</template>

<script lang="ts" setup>
import echarts from "../../utils/echarts";
import { ECOption } from "../../utils/echarts";
import china from "./china.json";

defineOptions({
  name: "Center",
});

echarts.registerMap("china", china as any);

const option: ECOption = {
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
  legend: {
    show: false,
  },
  tooltip: {
    show: false,
  },
  // 即会渲染地图，同时充当地理坐标系
  geo: {
    zlevel: 1,
    type: "map",
    map: "china",
    itemStyle: {
      areaColor: "rgba(104, 216, 254, 0.5)",
      borderColor: "rgba(104, 216, 254, 0.7)",
    },
    // 高亮情况下
    emphasis: {
      itemStyle: {
        areaColor: "rgba(104, 216, 254, 1)",
      },
      label: {
        color: "#fff",
      },
    },
    label: {
      color: "#fff",
    },
    zoom: 1.3,
    top: 150,
  },
  series: [
    {
      // 散点图
      type: "effectScatter",
      // 数据
      data: [
        {
          value: [116.405285, 39.904989, "北京"],
        },
        [114, 22.4, "深圳"], // 数据有对象和数组写法，都行。这里演示了两种写法（数组形式更简单）
        [87, 43, "乌鲁木齐"],
      ],
      label: {
        show: true,
        color: "#fff",
        position: "top",
        formatter: `{@[2]}`, // 代表使用数据数组中下标2的数据
      },
      // 使用地理坐标系
      coordinateSystem: "geo",
      itemStyle: {
        color: "#fff",
      },
      animationDurationUpdate: 2000, // 增加动画持续时间
      animationEasingUpdate: "cubicInOut", // 使用更平滑的缓动效果
    },
    {
      type: "lines",
      data: [
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [114, 22.4], // 终点
          ],
        },
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [87, 43], // 终点
          ],
        },
      ],
      // 图形效果
      effect: {
        show: true,
        symbol:
          "path://M995.679767 658.818049c-8.943231-1.490539-23.848617-2.981077-44.716157-4.471615-73.03639-8.943231-207.184862-26.829694-295.126638-38.754003l-19.377001-5.962154h-2.981077l-44.716157-13.414848c-4.471616 90.922853-10.43377 166.94032-17.886463 225.071325v10.43377l22.358078 10.43377 70.055313 32.791849c2.981077 1.490539 4.471616 4.471616 4.471616 7.452693l1.490539 55.149927v4.471615c0 2.981077-1.490539 5.962154-4.471616 4.471616l-114.77147-19.377001c-8.943231 22.358079-17.886463 34.282387-31.30131 35.772925h-1.490539c-13.414847 0-23.848617-11.924309-31.30131-35.772925l-114.77147 17.886463c-2.981077 0-4.471616-1.490539-4.471616-4.471616v-4.471616l1.490539-55.149927c0-2.981077 1.490539-5.962154 4.471615-7.452693l70.055313-32.791849 22.358079-10.43377V819.796215c-5.962154-58.131004-10.43377-134.148472-14.905386-225.071324l-46.206696 13.414847h-4.471615l-19.377002 4.471616c-87.941776 10.43377-222.090247 26.829694-295.126637 35.772925-20.86754 2.981077-35.772926 4.471616-44.716158 4.471616-23.848617 2.981077-25.339156-26.829694-7.452692-37.263464 2.981077-1.490539 56.640466-29.810771 123.714701-67.074236v-38.754003c0-14.905386 11.924309-26.829694 26.829695-26.829694s26.829694 11.924309 26.829694 26.829694v8.943232c40.244541-20.86754 81.979622-43.225619 119.243086-64.093159v-44.716157c0-14.905386 11.924309-26.829694 26.829694-26.829695s26.829694 11.924309 26.829694 26.829695v14.905385c23.848617-11.924309 43.225619-23.848617 56.640466-31.30131-1.490539-174.393013 11.924309-308.541485 61.112082-332.390101 2.981077-1.490539 4.471616-1.490539 7.452693-2.981078 1.490539 0 4.471616 0 5.962154-1.490538h5.962154c1.490539 0 4.471616 0 5.962154 1.490538 2.981077 0 4.471616 1.490539 7.452693 2.981078 49.187773 23.848617 62.60262 157.997089 58.131005 332.390101 13.414847 7.452693 32.791849 17.886463 55.149927 29.810772v-14.905386c0-14.905386 11.924309-26.829694 26.829694-26.829694s26.829694 11.924309 26.829695 26.829694v44.716157c37.263464 20.86754 78.998544 43.225619 119.243085 65.583698V506.783115c0-14.905386 11.924309-26.829694 26.829695-26.829694s26.829694 11.924309 26.829694 26.829694v44.716157c68.564774 37.263464 122.224163 67.074236 123.714702 68.564775 25.339156 10.43377 23.848617 41.73508-1.490539 38.754002z",

        symbolSize: 16,
        color: "#fff",
      },

      lineStyle: {
        color: "#fff",
        curveness: 0.2,
      },
      // 使用地理坐标系
      coordinateSystem: "geo",
      zlevel: 2,
    },
  ],
};
</script>

<style scoped lang="scss">
.center-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.bg-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0.3;
}
.lbx-img {
  width: 500px;
  height: 500px;
  animation: move 30s linear infinite;
}
.jt-img {
  width: 380px;
  height: 380px;
  animation: move 30s linear infinite reverse;
}
.map-img {
  width: 350px;
  height: 350px;
  animation: move 30s linear infinite;
}

@keyframes move {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
